<template>
  <el-space
    size="large"
    direction="vertical"
    style="width: 100%"
    alignment="flex-start"
    fill
  >
    <!-- 操作按钮 -->
    <el-space size="large" direction="horizontal" alignment="flex-start">
      <template v-if="detailData.acceptApplyRespVO?.type != 3">
        <el-button
          type="primary"
          @click="
            router.push(
              `/project/accept/task-in-file?id=${detailData.acceptApplyRespVO.id}&getType=2`
            )
          "
        >
          上传验收材料
        </el-button>
        <el-button
          type="primary"
          @click="
            router.push(
              `/project/accept/task-in-upload?id=${detailData.acceptApplyRespVO?.id}&getType=2`
            )
          "
        >
          修改验收结论
        </el-button>
      </template>
      <el-button>导出数据</el-button>
    </el-space>
    <!-- 操作按钮 -->
    <!-- 项目简介 -->
    <div v-if="detailData.acceptApplyRespVO" class="project-title">
      <div class="item">
        <span class="label">项目验收申请ID：</span>
        <span>{{ detailData.acceptApplyRespVO.id }}</span>
      </div>
      <div class="item">
        <span class="label">审核状态：</span>
        <span>
          {{
            dictStore.getDictLabelForValue(
              'audit_status',
              detailData.acceptApplyRespVO.status
            )
          }}
        </span>
      </div>
      <div class="item">
        <span class="label">记录创建人：</span>
        <span>{{ detailData.acceptApplyRespVO.creatorName }}</span>
      </div>
      <div class="item">
        <span class="label">记录创建时间：</span>
        <span>
          {{
            $XEUtils.toDateString(
              detailData.acceptApplyRespVO.createTime,
              'yyyy-MM-dd HH:mm:ss'
            )
          }}
        </span>
      </div>
    </div>
    <!-- 项目简介 -->
    <!-- 项目信息 -->
    <div v-if="detailData.projectInfo" class="box" style="width: 100%">
      <el-space
        size="large"
        direction="vertical"
        style="width: 100%"
        alignment="flex-start"
        fill
      >
        <div class="common-title">
          <img src="@/assets/project_images/icon2.png" alt="" class="icon" />
          <span>项目信息</span>
        </div>
        <vxe-table
          align="left"
          :data="[detailData.projectInfo]"
          size="small"
          border
          min-height="0"
        >
          <vxe-column field="projectCode" title="项目编号" />
          <vxe-column field="projectName" title="项目名称" />
          <vxe-column field="projectLevel" title="项目级别">
            <template #default="{ row }">
              {{
                dictStore.getDictLabelForValue(
                  'project_level',
                  row.projectLevel
                )
              }}
            </template>
          </vxe-column>
          <vxe-column field="projectTypeName" title="项目类型" />
          <vxe-column field="keyProject" title="是否重点项目">
            <template #default="{ row }">
              {{ dictStore.getDictLabelForValue('yes_no', row.keyProject) }}
            </template>
          </vxe-column>
          <vxe-column field="headerName" title="项目负责人" />
        </vxe-table>
      </el-space>
    </div>
    <!-- 项目信息 -->
    <!-- 课题信息 -->
    <div v-if="detailData.topicInfo" class="box">
      <el-space
        size="large"
        direction="vertical"
        style="width: 100%"
        alignment="flex-start"
        fill
      >
        <div class="common-title">
          <img src="@/assets/project_images/icon2.png" alt="" class="icon" />
          <span>课题信息</span>
        </div>
        <vxe-table
          align="left"
          :data="[detailData.topicInfo]"
          size="small"
          border
          min-height="0"
        >
          <vxe-column field="id" title="课题编号" />
          <vxe-column field="name" title="课程名称" />
          <vxe-column field="leader" title="课题负责人" />
          <vxe-column field="type" title="课题类型">
            <template #default="{ row }">
              {{ dictStore.getDictLabelForValue('topic_type', row.type) }}
            </template>
          </vxe-column>
          <vxe-column field="subjectAreaText" title="专业领域" />
          <vxe-column
            field="researchStartDate"
            title="研究开始时间"
            :formatter="['formatDate', 'yyyy-MM-dd HH:mm:ss']"
          />
          <vxe-column
            field="researchEndDate"
            title="研究结束时间"
            :formatter="['formatDate', 'yyyy-MM-dd HH:mm:ss']"
          />
          <vxe-column field="estimatedBudget" title="预计投入经费（万元）" />
          <vxe-column field="externalCooperationRequired" title="是否需要外协">
            <template #default="{ row }">
              {{
                dictStore.getDictLabelForValue(
                  'yes_no',
                  row.externalCooperationRequired
                )
              }}
            </template>
          </vxe-column>
          <vxe-column field="leadingUnitName" title="承担单位" />
          <vxe-column field="collaboratingUnitNames" title="协作单位" />
        </vxe-table>
      </el-space>
    </div>
    <!-- 课题信息 -->
    <!-- 其他信息 -->
    <div v-if="detailData.acceptApplyRespVO" class="box">
      <el-space
        size="large"
        direction="vertical"
        style="width: 100%"
        alignment="flex-start"
        fill
      >
        <div class="common-title">
          <img src="@/assets/project_images/icon4.png" alt="" class="icon" />
          <span>其他信息</span>
        </div>
        <vxe-table
          align="left"
          :data="[detailData.acceptApplyRespVO]"
          size="small"
          border
          min-height="0"
        >
          <vxe-column field="type" title="验收类型">
            <template #default="{ row }">
              {{ dictStore.getDictLabelForValue('accept_type', row.type) }}
            </template>
          </vxe-column>
          <vxe-column field="conclusion" title="验收结论">
            <template #default="{ row }">
              {{
                dictStore.getDictLabelForValue(
                  'accept_conclusion',
                  row.conclusion
                )
              }}
            </template>
          </vxe-column>
          <vxe-column field="creatorDepName" title="上报单位" />
          <vxe-column field="creatorName" title="上报人" />
        </vxe-table>
      </el-space>
    </div>
    <!-- 其他信息 -->

    <template v-if="detailData.acceptApplyRespVO?.type == 3">
      <el-descriptions :column="1">
        <el-descriptions-item label="已经开展工作及取得阶段成果：">
          {{ detailData.acceptApplyRespVO.stageAchieve }}
        </el-descriptions-item>
        <el-descriptions-item
          label="计划的研究内容和技术经济指标：（与计划任务书一致）"
        >
          {{ detailData.acceptApplyRespVO.researchProposal }}
        </el-descriptions-item>
        <el-descriptions-item
          label="没有完成的条款：（对照研究内容和技术经济指标）"
        >
          {{ detailData.acceptApplyRespVO.noTerms }}
        </el-descriptions-item>
        <el-descriptions-item label="没有完成的原因分析：">
          {{ detailData.acceptApplyRespVO.noTerms }}
        </el-descriptions-item>
        <el-descriptions-item label="承担单位意见：">
          {{ detailData.acceptApplyRespVO.noTerms }}
        </el-descriptions-item>
        <el-descriptions-item label="公司主管部门意见：">
          {{ detailData.acceptApplyRespVO.noTerms }}
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template v-else-if="detailData.acceptApplyRespVO?.type == 2">
      <el-descriptions :column="1">
        <el-descriptions-item label="研究内容和技术指标">
          {{ detailData.acceptApplyRespVO.researchProposal }}
        </el-descriptions-item>
        <el-descriptions-item label="取得成果简介">
          {{ detailData.acceptApplyRespVO.stageAchieve }}
        </el-descriptions-item>
        <template v-if="detailData.acceptApplyRespVO.conclusion">
          <el-descriptions-item label="外协单位：">
            {{ detailData.acceptApplyRespVO.outUnitName }}
          </el-descriptions-item>
          <el-descriptions-item label="外协负责人：">
            {{ detailData.acceptApplyRespVO.outUnitLeaderName }}
          </el-descriptions-item>
          <el-descriptions-item label="合同履行周期：">
            {{
              $XEUtils.toDateString(
                detailData.acceptApplyRespVO.contractFulfillStart,
                'yyyy-MM-dd HH:mm:ss'
              ) +
              '-' +
              $XEUtils.toDateString(
                detailData.acceptApplyRespVO.contractFulfillEnd,
                'yyyy-MM-dd HH:mm:ss'
              )
            }}
          </el-descriptions-item>
          <el-descriptions-item label="预计验收时间：">
            {{
              $XEUtils.toDateString(
                detailData.acceptApplyRespVO.conclusionStart,
                'yyyy-MM-dd HH:mm:ss'
              ) +
              '-' +
              $XEUtils.toDateString(
                detailData.acceptApplyRespVO.conclusionEnd,
                'yyyy-MM-dd HH:mm:ss'
              )
            }}
          </el-descriptions-item>
          <el-descriptions-item label="是否通过本单位自验收：">
            {{
              dictStore.getDictLabelForValue(
                'yes_no',
                detailData.acceptApplyRespVO.seftAccept
              )
            }}
          </el-descriptions-item>
          <el-descriptions-item label="合同主要服务内容：">
            {{ detailData.acceptApplyRespVO.contractContent }}
          </el-descriptions-item>
          <el-descriptions-item label="预期验收指标：">
            {{ detailData.acceptApplyRespVO.preAcceptIndicator }}
          </el-descriptions-item>
        </template>
      </el-descriptions>
      <el-descriptions
        v-if="detailData.documentList && detailData.documentList.length"
        :column="1"
        direction="vertical"
      >
        <el-descriptions-item label="验收材料：">
          <documentList :list="detailData.documentList" />
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template v-else-if="detailData.acceptApplyRespVO?.type == 1">
      <el-descriptions :column="1">
        <el-descriptions-item label="研究内容和技术指标">
          {{ detailData.acceptApplyRespVO.researchProposal }}
        </el-descriptions-item>
        <el-descriptions-item label="取得成果简介">
          {{ detailData.acceptApplyRespVO.stageAchieve }}
        </el-descriptions-item>
        <template v-if="detailData.acceptApplyRespVO.conclusion">
          <el-descriptions-item label="验收时间：">
            {{
              $XEUtils.toDateString(
                detailData.acceptApplyRespVO.conclusionStart,
                'yyyy-MM-dd HH:mm:ss'
              ) +
              '-' +
              $XEUtils.toDateString(
                detailData.acceptApplyRespVO.conclusionEnd,
                'yyyy-MM-dd HH:mm:ss'
              )
            }}
          </el-descriptions-item>
          <el-descriptions-item label="验收地点：">
            {{ detailData.acceptApplyRespVO.conclusionAddress }}
          </el-descriptions-item>
          <el-descriptions-item label="验收井号：">
            {{ detailData.acceptApplyRespVO.wellNumName }}
            {{
              dictStore.getDictLabelForValue(
                'well_no',
                detailData.acceptApplyRespVO.wellNum
              )
            }}
          </el-descriptions-item>
          <el-descriptions-item label="配合井队及所属单位：">
            {{ detailData.acceptApplyRespVO.wellTeamName }}
          </el-descriptions-item>
          <el-descriptions-item label="预期验收指标：">
            {{ detailData.acceptApplyRespVO.preAcceptIndicator }}
          </el-descriptions-item>
        </template>
      </el-descriptions>
      <el-descriptions
        v-if="detailData.documentList && detailData.documentList.length"
        :column="1"
        direction="vertical"
      >
        <el-descriptions-item label="验收材料：">
          <documentList :list="detailData.documentList" />
        </el-descriptions-item>
      </el-descriptions>
    </template>
  </el-space>
</template>

<script setup>
  import { useDictStore } from '@/store/modules/dict'
  import documentList from './documentList.vue'

  const props = defineProps({
    detailData: {
      type: Object,
      default: () => {},
    },
  })

  const dictStore = useDictStore()
  const router = useRouter()
</script>

<style lang="scss" scoped>
  .project-title {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 28px;
    padding: 10px;
    background: var(--vxe-table-header-background-color);

    .item {
      display: inline-flex;
      margin-right: 90px;
      font-size: $base-font-size-default;

      .label {
        color: $base-color-text-secondary;
      }
    }
  }

  .box {
    .common-title {
      display: flex;
      align-items: center;
      font-size: $base-font-size-default;
      font-weight: bold;
      color: $base-color-text-primary;

      .icon {
        margin-right: 10px;
      }
    }

    .sub-title {
      font-size: $base-font-size-small;
      font-weight: bold;
    }
  }
</style>
